@charset "utf-8";
@import "reset";
@import "base";
@import "common";


    header{
        height: vw(150);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 vw(23);

        .logo{
            width: vw(123);
            height: vw(123);
        }

        .search{
            width: vw(265);
            height: vw(50);
            border: 1px solid $color;
            border-radius: vw(50);

            input{
                margin-left: vw(30);
                width: vw(168);
                outline: none;
                border: none;
                appearance: none;
                vertical-align: middle;
                color: #777777;
                // background-color: gray;
                font-size: vw(24);
            }

            i{
                margin-left: vw(16);
                vertical-align: middle;
                font-size: vw(30);
                color: $color;
            }
        }

        .select{
            width: vw(160);
            height: vw(55);
            position: relative;
            
            select{
                width: 100%;
                height: 100%;
                border-color: $color;
                appearance: none;
                padding: 0 vw(14);
                font-size: vw(26);
            }

            &::after{
                content: "";
                display: block;
                border: 8px solid $color;
                border-color: #ff9344 transparent transparent transparent;
                width: 0;
                height: 0;
                position: absolute;
                right: vw(11);
                top: vw(20);
                pointer-events: none;
            }
        }
    }

    .banner{
        height: vw(287);
    }

    main{
        margin-top: vw(33);
        // margin-bottom: vw(30);
        .discounts{
            padding: 0 vw(21);
            .text{
                display: flex;
                justify-content: space-between;
                

                .left{
                     i{
                         font-size: vw(56);
                         color: $color;
                     }

                     span{
                         display: inline-block;
                         font-size: vw(30);
                         font-weight: bold;
                         vertical-align: vw(10);
                     }
                }

                .right{
                    font-size: vw(24);
                    font-weight: bold;
                    line-height: vw(56);

                    i{
                        font-size: vw(25);
                        color: $color;
                    }
                }
            }

            .list{
                margin-top: VW(15);
                display: flex;
                flex-wrap: wrap;
                padding: 0 vw(57);
                justify-content: space-between;

                .box{
                    width: vw(240);
                    height: vw(95);
                }

                .box:nth-child(1){
                    margin-bottom: vw(30);
                }
                .box:nth-child(2){
                    margin-bottom: vw(30);
                }
            }
        }

        .guess-live{
            margin-top: vw(30);
            padding: 0 vw(21);

            .text{
                display: flex;
                justify-content: space-between;

                .left{
                     i{
                         font-size: vw(56);
                         color: $color;
                     }

                     span{
                         display: inline-block;
                         font-size: vw(30);
                         font-weight: bold;
                         vertical-align: vw(10);
                     }
                }

                .right{
                    font-size: vw(24);
                    font-weight: bold;
                    line-height: vw(56);

                    i{
                        font-size: vw(25);
                        color: $color;
                    }
                }
            }

            .list{
                margin-top: vw(33);
                overflow: auto;
                height: vw(300);

                .box{
                    // width: vw(717);
                    margin-bottom: vw(30);
                    display: flex;
                    .left{
                        width: vw(210);
                        height: vw(165);
                    }

                    .right{
                        margin-top: vw(28);
                        flex: 1;
                        // width: vw(479);
                        margin-left: vw(28);

                        .one{
                            display: flex;
                            justify-content: space-between;

                            p{
                                font-size: vw(30);
                                font-weight: bold;
                                line-height: vw(52);
                            }

                            span{
                                font-size: vw(22);
                                line-height: vw(52);
                            }
                        }

                        .two{
                            display: flex;
                            font-size: vw(22);
                            color: #494949;
                            line-height: vw(52);

                            span{
                                line-height: vw(53);
                            }
                        }

                        .three{
                            display: flex;
                            justify-content: space-between;
                            font-size: vw(32);
                            line-height: vw(28);
                            color: $color;

                            span{
                                font-size: vw(22);
                                color: #494949;
                            }
                        }
                    }

                    &:last-of-type{
                        margin-bottom:0;
                    }
                }
            }
        }
    }

